<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>百度一下，你就知道</title>
        <style type="text/css">
            .nav{
                color: #fff;
                position: absolute;
                right: 0;
                top: 0;
                margin: 19px 0 5px 0;
                padding: 0 96px 0 0;
            }
            .mnav{
                float: left;
                color: #333;
                font-weight: 700;
                line-height: 24px;
                margin-left: 20px;
                font-size: 13px;
                text-decoration: underline;
            }
            .sp{
                color: #f23f40;
                position: relative;
            }
            .xiala{
                width: 60px;
                height: 23px;
            }
            .product{
                position: absolute;
                right: 10px;
                width: 60px;
                height: 23px;
                float: left;
                color: #fff;
                background: #38f;
                line-height: 24px;
                font-size: 13px;
                text-align: center;
                overflow: hidden;
                border-bottom: 1px solid #38f;
                margin-left: 19px;
                margin-right: 2px;
                text-decoration: none;
                display: block;
            }
            .items{
                width:60px;
                height: 0px;
                background-color: #b0b0b0;
                position: absolute;
                top:20px;
                right: 10px;
            }
            .xiala:hover .items{
                height: 500px;
                overflow: visible;
            }
            .item{
                width: 60px;
                height:80px;
            }
            .picture{
                width: 60px;
                height:60px;
                background-image: url("bdyx.png");
                background-repeat: no-repeat;
                background-size: cover;
            }
            .words{
                width: 60px;
                height: 20px;
                font-size: 14px;
                text-align: center;
                color: #666666;
            }
            .logo{
                width: 270px;
                height: 129px;
                background-image: url("bd_logo1.png");
                background-repeat: no-repeat;
                background-size: cover;
                margin: 60px auto;
            }
            .search {
                height: 36px ;
                width: 640px ;
                margin: 0 auto ;
                border: 1px solid #1e9fff ;
                position: relative;
                top:-40px;
            }

            .input { float: left ; width: 520px ; height: 36px ; background-color: #ffffff ;  }

            [name=wd] {
                width: 490px ;
                height: 20px ;
                margin: 5px  10px;
                border: none ;
                outline : none ;
                background-color: transparent ;
            }

            .camera-container { float: left ; width: 20px ; height: 36px ; background-color: #ffffff ; }
            .camera {
                background-image: url( "camera_new.png" );
                height: 16px ;
                width: 18px ;
                margin: 12px 1px ;
                cursor: pointer;
            }
            .camera:hover {
                background-position: 0 -20px ;
            }
            .button { float: left ; width: 100px ; height: 36px ; background-color: #dedede ; }
            [type=submit] {
                width:100px;
                height:36px;
                background-color: #1e9fff;
                border: none;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <a href="" class="mnav sp">抗击肺炎</a>
            <a href="" class="mnav">新闻</a>
            <a href="" class="mnav">hao123</a>
            <a href="" class="mnav">地图</a>
            <a href="" class="mnav">视频</a>
            <a href="" class="mnav">贴吧</a>
            <a href="" class="mnav">学术</a>
            <a href="" class="mnav">登录</a>
            <a href="" class="mnav">设置</a>
            <a href="" class="xiala">
                <span class="product">更多产品</span></a>
                <div class="items">
                    <div class="item ">
                        <div class="picture"></div>
                        <span class="words">百度营销</span>
                    </div>
                    <div class="item ">
                        <div class="picture"></div>
                        <span class="words">百度营销</span>
                    </div>
                    <div class="item ">
                        <div class="picture"></div>
                        <span class="words">百度营销</span>
                    </div>
                    <div class="item ">
                        <div class="picture"></div>
                        <span class="words">百度营销</span>
                    </div>
                    <div class="item ">
                        <div class="picture"></div>
                        <span class="words">百度营销</span>
                    </div>
                    <div class="item ">
                        <div class="picture"></div>
                        <span class="words">百度营销</span>
                    </div>
                </div>
        </div>


        <div class="logo"></div>
        <form action="http://www.baidu.com/s">
            <div class="search">
                <div class="input">
                    <input type="text" name="wd">
                </div>
                <div class="camera-container">
                    <div class="camera"></div>
                </div>
                <div class="button">
                    <input type="submit" value="百度一下">
                </div>
            </div>
        </form>

    </body>
</html>